<template>
  <div>
    <Row>
      <Col :span="8"
           style="padding-right:5px;padding-bottom:5px;">
      <videoPlayer ref="videoPlayer1"
                   :options="videoOptions1"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
      <Col :span="8"
           style="padding-right:5px;padding-bottom:5px;">
      <videoPlayer ref="videoPlayer2"
                   :options="videoOptions2"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
      <Col :span="8"
           style="padding-bottom:5px;">
      <videoPlayer ref="videoPlayer3"
                   :options="videoOptions3"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
    </Row>

    <Row>
      <Col :span="8"
           style="padding-right:5px;padding-bottom:5px;">
      <videoPlayer ref="videoPlayer4"
                   :options="videoOptions4"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
      <Col :span="8"
           style="padding-right:5px;padding-bottom:5px;">
      <videoPlayer ref="videoPlayer5"
                   :options="videoOptions5"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
      <Col :span="8"
           style="padding-bottom:5px;">
      <videoPlayer ref="videoPlayer6"
                   :options="videoOptions6"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
    </Row>
    <Row>
      <Col :span="8">
      <videoPlayer ref="videoPlayer7"
                   :options="videoOptions7"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
      <Col :span="8">
      <videoPlayer ref="videoPlayer8"
                   :options="videoOptions8"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
      <Col :span="8">
      <videoPlayer ref="videoPlayer9"
                   :options="videoOptions9"
                   class="vjs-custom-skin videoPlayer" />
      </Col>
    </Row>
  </div>
</template>
<script>
import 'video.js/dist/video-js.css'
import videoPlayer from './player.vue'
// import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
  props: {
    videoSrcs: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  components: {
    videoPlayer
  },

  data() {
    return {
      modalVisible: false,
      channel: 1,
      videoOptions1: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions2: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions3: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions4: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions5: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions6: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions7: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions8: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      },
      videoOptions9: {
        width: 318,
        height: 230,
        sources: [
          {
            type: 'rtmp/mp4',
            src: ''
          }
        ],
        techOrder: ['flash'],
        muted: true, // 默认静音
        preload: 'auto', // 视频预加载
        autoplay: true,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        live: true,
        language: 'zh-CN'
      }
    }
  },
  // computed: {
  //   player1: function() {
  //     return this.$refs.videoPlayer1.player;
  //   },
  //   player2: function() {
  //     return this.$refs.videoPlayer2.player;
  //   },
  //   player3: function() {
  //     return this.$refs.videoPlayer3.player;
  //   },
  //   player4: function() {
  //     return this.$refs.videoPlayer4.player;
  //   },
  //   player5: function() {
  //     return this.$refs.videoPlayer5.player;
  //   },
  //   player6: function() {
  //     return this.$refs.videoPlayer6.player;
  //   },
  //   player7: function() {
  //     return this.$refs.videoPlayer7.player;
  //   },
  //   player8: function() {
  //     return this.$refs.videoPlayer8.player;
  //   }
  // },
  watch: {
    videoSrcs: {
      deep: true,
      handler(curVal, oldVal) {
        if (curVal && curVal.length > 7) {
          // this.player1.src(curVal[0]);
          // this.player2.src(curVal[1]);
          // this.player3.src(curVal[2]);
          // this.player4.src(curVal[3]);
          // this.player5.src(curVal[4]);
          // this.player6.src(curVal[5]);
          // this.player7.src(curVal[6]);
          // this.player8.src(curVal[7]);
          this.videoOptions1.sources[0].src = curVal[0]
          this.videoOptions2.sources[0].src = curVal[1]
          this.videoOptions3.sources[0].src = curVal[2]
          this.videoOptions4.sources[0].src = curVal[3]
          this.videoOptions5.sources[0].src = curVal[4]
          this.videoOptions6.sources[0].src = curVal[5]
          this.videoOptions7.sources[0].src = curVal[6]
          this.videoOptions8.sources[0].src = curVal[7]
        }
      },
      immediate: true
    }
  },
  methods: {}
}
</script>
<style lang="less">
</style>